<template>
	<div class="transaction-container">
		<!-- 买卖双方信息 -->
		<div class="user-info">
			<div class="info-block seller" style="background-color: palevioletred;" v-if="detail.sellerName">
				<h3>卖家联系方式</h3>
				<p>昵称：{{ detail.sellerName }}</p>
				<p>手机：{{ detail.sellerPhone }}</p>
			</div>
			<div class="info-block buyer" style="background-color:aliceblue;" v-if="detail.buyerName">
				<h3>买家联系方式</h3>
				<p>昵称：{{ detail.buyerName }}</p>
				<p>手机：{{ detail.buyerPhone }}</p>
			</div>
		</div>

    <!-- 交易信息 -->
    <div class="transaction-info">
      <h3>交易详情</h3>
      <div class="info-item">
        <span>出售数量：</span>
        <span>{{ detail.tokenAmount }}</span>
      </div>
      <div class="info-item">
        <span>出售价格：</span>
        <span>{{ detail.curRate }}</span>
      </div>
      <div class="info-item">
        <span>总价：</span>
        <span>{{ detail.balanceAmount }}</span>
      </div>
      <div class="info-item">
        <span>订单时间：</span>
        <span>{{ detail.createTime }}</span>
      </div>
      <div class="info-item">
        <span>订单状态：</span>
        <span v-if="detail.status === 1">匹配中</span>
        <span v-if="detail.status === 2">待支付</span>
        <span v-if="detail.status === 3">已支付</span>
        <span v-if="detail.status === 4">已确认</span>
        <span v-if="detail.status === 5">已申诉</span>
        <span v-if="detail.status === -1">已取消</span>
      </div>
    </div>

		<!-- 银行信息 -->
		<div class="bank-info" v-if="detail.sellerBank && detail.sellerBank.realName">
			<h3>收款账户信息</h3>
			<div class="info-item">
				<span>姓名：</span>
				<span>{{ detail.sellerBank.realName }}<span @click="copyrealName" style="color:bisque">复制</span></span>
			</div>
			<div class="info-item">
				<span>开户银行：</span>
				<span>{{ detail.sellerBank.bankName }}<span @click="copybankName" style="color:bisque">复制</span></span>
			</div>
			<div class="info-item">
				<span>银行卡号：</span>
				<span>{{ detail.sellerBank.bankNo }}<span @click="copybankNo" style="color:bisque">复制</span></span>
			</div>
		</div>

		<div class="bank-image" v-if="detail.sellerBank">
			<div class="bank-item" v-if="detail.sellerBank.alipayReceiveImg">
				<div>卖家支付宝</div>
				<image :src="detail.sellerBank.alipayReceiveImg" class="image" v-if="detail.sellerBank.alipayReceiveImg"
					@click="onalipayReceiveImg"></image>
				<image src="/static/blind/nodata.png" class="image" v-else></image>
			</div>
			<div class="bank-item" v-if="detail.sellerBank.wxReceiveImg">
				<div>卖家微信</div>
				<image :src="detail.sellerBank.wxReceiveImg" class="image" v-if="detail.sellerBank.wxReceiveImg"
					@click="onwxReceiveImg">
				</image>
				<image src="/static/blind/nodata.png" class="image" v-else></image>
			</div>
			<div class="bank-item" v-if="detail.voucherImg">
				<div>支付凭证</div>
				<image :src="detail.voucherImg" class="image" v-if="detail.voucherImg" @click="onvoucherImg"></image>
				<image src="/static/blind/nodata.png" class="image" v-else></image>
			</div>
		</div>
		<div style="width: 100%;height: 100px;"></div>

		<!-- 操作按钮 -->
		<div class="action-buttons">
			<button class="btn cancel" @click="cancelTransaction" v-if="detail.status === 1 && ((detail.type == 2 && detail.buyerId === uid) || (detail.type === 1 && detail.sellerId === uid))">取消挂单</button>
			<button class="btn upload" @click.stop="uploadPayment" v-if="detail.status === 2 && detail.buyerId === uid">上传支付凭证</button>
			<button class="btn ok" @click="TransactionOk" v-if="detail.status === 3 && detail.sellerId === uid">确认已收款</button>
			<button class="btn ok" @click="appealOrder" v-if="detail.status === 3">申诉</button>
		</div>

		<view class='signTip acea-row row-center-wrapper' :class='active==true?"on":""'>
			<view class='signTipLight'>
				<view class="sign-title">是否取消？</view>
				<view class="signbtn">
					<view @click="cancel">取消</view>
					<view @click="submitCancel">确认</view>
				</view>
			</view>
		</view>
		<view class='mask' @touchmove.stop.prevent="false" :hidden='active==false'></view>
	</div>
</template>

<script>
	import {
    submitpay,
    subcancel,
    subconfirm,
    tradeAppeal,
		getTradeInfo
	} from "@/api/new";
  import {
    mapGetters
  } from "vuex";
	export default {
		data() {
			return {
				hasPayment: false,
				id: null,
				detail: {sellerBank: {}},
				voucherImg: "", // 支付凭证
				active: false,
			}
		},
    computed: {
      ...mapGetters(['isLogin', 'uid'])
    },
		onLoad(options) {
			console.log("options", options)
			this.type = options.id
			this.getdetail(options.id)
		},
		methods: {
			getdetail: function(id) {
        getTradeInfo(id).then((res) => {
					console.log("res", res)
					this.detail = res.data
				}).catch(err => {
					this.$util.Tips({
						title: err
					});
				});
			},
			copyBankInfo() {
				// 实现复制银行信息逻辑
				const text = `${this.bankInfo.name} ${this.bankInfo.bankName} ${this.bankInfo.cardNumber}`
				this.$copyText(text)
			},
      cancelTransaction(){
        this.active = true
      },
      submitCancel() {
        const data = {
          id: this.detail.id
        }
        subcancel(data).then((res) => {
          console.log(res)
          if (res.code === 200) {
            this.$util.Tips({
              title: "成功"
            });
            this.getmyLists()
            this.loading = false
            this.active = true
          }
        }).catch(err => {
          this.$util.Tips({
            title: err
          });
          this.loading = false
        });
			},
			uploadPayment() {
				// 上传支付凭证逻辑
				console.log('上传支付凭证')
				let that = this;
				that.$util.uploadImageOne({
					url: 'upload/image',
					name: 'multipart',
					model: "maintain",
					pid: 0,
					count: 1
				}, function(res) {
					that.voucherImg = res;
          this.payOrder();
				});
			},

			copyrealName() {
				uni.setClipboardData({
					data: this.detail.sellerBank.realName
				});
			},
			copybankName() {
				uni.setClipboardData({
					data: this.detail.sellerBank.bankName
				});
				// this.$copyText(this.detail.sellerBank.bankName)
			},
			copybankNo() {
				uni.setClipboardData({
					data: this.detail.sellerBank.bankNo
				});
			},
			onalipayReceiveImg() {
				uni.previewImage({
					urls: [this.detail.sellerBank.alipayReceiveImg], //需要预览的图片http链接列表，多张的时候，url直接写在后面就行了
					current: '', // 当前显示图片的http链接，默认是第一个
					success: function(res) {},
					fail: function(res) {},
					complete: function(res) {},
				})
			},
			onwxReceiveImg() {
				uni.previewImage({
					urls: [this.detail.sellerBank.wxReceiveImg], //需要预览的图片http链接列表，多张的时候，url直接写在后面就行了
					current: '', // 当前显示图片的http链接，默认是第一个
					success: function(res) {},
					fail: function(res) {},
					complete: function(res) {},
				})
			},
			onvoucherImg() {
				uni.previewImage({
					urls: [this.detail.sellerBank.wxReceiveImg], //需要预览的图片http链接列表，多张的时候，url直接写在后面就行了
					current: '', // 当前显示图片的http链接，默认是第一个
					success: function(res) {},
					fail: function(res) {},
					complete: function(res) {},
				})
			},
			cancel: function() {
				this.active = false
			},
      //上传支付凭证
      payOrder: function(){
        const data = {
          id: this.detail.id,
          voucher: this.voucherImg
        }
        submitpay(data).then((res) => {
          console.log(res)
          if (res.code === 200) {
            this.$util.Tips({
              title: "成功"
            });
            this.getmyLists()
            this.loading = false
            this.active = true
          }
        }).catch(err => {
          this.$util.Tips({
            title: err
          });
          this.loading = false
        });
      },
			// 确认该笔交易逻辑
			TransactionOk: function(){
        this.loading = true
        const obj = {
          id: this.detail.id
        }
        subconfirm(obj).then((res) => {
          console.log(res)
          this.$util.Tips({
            title: "成功"
          });
          this.num = 0
          this.tokenAmount = null
          this.loading = false
        }).catch(err => {
          this.$util.Tips({
            title: err
          });
          this.loading = false
        });
			},
      //申诉交易逻辑
      appealOrder: function(){
        this.loading = true
        const obj = {
          id: this.detail.id,
          remark: '未收到款项'
        }
        tradeAppeal(obj).then((res) => {
          console.log(res)
          this.$util.Tips({
            title: "成功"
          });
          this.num = 0
          this.tokenAmount = null
          this.loading = false
        }).catch(err => {
          this.$util.Tips({
            title: err
          });
          this.loading = false
        });
      }
		}
	}
</script>

<style scoped lang="scss">
	.transaction-container {
		max-width: 600px;
		margin: 10px auto;
		padding: 15px;
		background: #f5f5f5;
		border-radius: 8px;
	}

	.user-info {
		display: flex;
		justify-content: space-between;
		margin-bottom: 20px;
	}

	.seller {
		background-color: darkturquoise;
	}

	.buyer {
		background-color: aliceblue;
	}

	.info-block {
		background: white;
		padding: 15px;
		border-radius: 8px;
		width: 48%;
	}

	.transaction-info {
		width: 100%;
		background-color: #fff;
		padding: 15px;
		border-radius: 8px;
	}

	h3 {
		color: #333;
		margin-bottom: 10px;
		font-size: 16px;
	}

	.info-item {
		display: flex;
		justify-content: space-between;
		margin: 8px 0;
		color: #666;
	}

	.bank-info,
	.usdt-info {
		background: white;
		padding: 15px;
		border-radius: 8px;
		margin: 15px 0;
	}

	.action-buttons {
		/* display: flex; */
		justify-content: space-between;
		margin-top: 20px;
		position: fixed;
		bottom: 10px;
		width: 100%;
	}

	.btn {
		width: 90%;
		padding: 10px 20px;
		border: none;
		border-radius: 4px;
		cursor: pointer;
		margin-top: 10px;
	}

	.cancel {
		background: #ff4444;
		color: white;
	}

	.upload {
		background: #0099ff;
		color: white;
	}

	.ok {
		background-color: #333;
		color: #fff;
	}

	.bank-image {
		width: 100%;
		border-radius: 8px;
		margin: 15px 0;
		padding-top: 10px;
		display: flex;
		flex-wrap: wrap;
		text-align: center;
		background-color: #fff;
	}

	.image {
		width: 100%;
		height: 220px;
		margin-top: 5px;
		border-radius: 8px;
	}

	.bank-item {
		width: calc(50% - 10px);
		margin: 5px;

		div {
			font-size: 16px;
		}
	}

	span[onclick] {
		color: #0099ff;
		cursor: pointer;
		font-size: 12px;
	}

	.signTip {
		width: 644rpx;
		height: 285rpx;
		position: fixed;
		top: 50%;
		left: 50%;
		margin-left: -322rpx;
		margin-top: -322.5rpx;
		border-radius: 10px;
		z-index: 99;
		text-align: center;
		transition: all 0.3s ease-in-out 0s;
		opacity: 0;
		transform: scale(0);
		background-color: #fff;

		.sign-title {
			width: 100%;
			font-size: 40rpx;
		}

		.signbtn {
			width: 100%;
			display: flex;
			padding-top: 28px;

			:nth-child(1) {
				width: 100%;
				width: 130px;
				background-color: #333;
				color: #fff;
				border-radius: 20px;
				text-align: center;
				height: 40px;
				font-size: 16px;
				line-height: 40px;
			}

			:nth-child(2) {
				margin-left: 20px;
				width: 130px;
				background-color: #e73224;
				color: #fff;
				border-radius: 20px;
				text-align: center;
				height: 40px;
				font-size: 16px;
				line-height: 40px;
			}
		}
	}

	.on {
		opacity: 1;
		transform: scale(1);
	}
</style>
